<template>
    <!-- 瀵艰埅鏍� -->
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">
            <h3>Main 首页〉</h3>
        </el-breadcrumb-item>

    </el-breadcrumb>


    <el-row :gutter="2">
        <el-col :offset="2">
            <el-button size="large" type="primary" @click="email_test">邮件测试</el-button>
            <el-button size="large" type="primary" @click="apitest">接口测试</el-button>

        </el-col>
    </el-row>


    <!-- <el-row>
        <el-col :offset="2">
            <el-text class="mx-1">SQL执行语句</el-text>
        </el-col>

    </el-row>

    <el-row>
        <el-col :span="2"></el-col>
        <el-col :span="20">
            <el-input v-model="textarea" :rows="4" type="textarea" placeholder="Please input SQL" />
        </el-col>
        <el-col :span="2"></el-col>
    </el-row>

    <el-row>
        <el-col :offset="20">
            <el-button size="large" type="primary" @click="run_sql">执行SQL</el-button>
        </el-col>
    </el-row> -->



    <!-- 列表 -->
    <el-row class="el-row" :gutter="20">
        <el-col :span="20" :offset="2">

            <el-table :data="tasklisttable" :border="true" style="width: 100%" stripe :table-layout="tableLayout">
                <!-- data  tasklisttable 返回的数据 要和每个列表中的 prop 数据一致才可以正常显示-->
                <el-table-column prop="pk" label="ID" width="80" />
                <el-table-column prop="fields.taskid" label="任务ID" width="300" />
                <el-table-column prop="fields.status" label="当前状态" width="160" />

                <el-table-column prop="fields.create_timestamp" label="创建时间" width="260" />
                <el-table-column prop="fields.flag" label="操作类型" width="160" />
                <el-table-column prop="fields.update_time" label="更新时间" width="260" />


                <el-table-column prop="progress" label="operation" width="360">
                    <!-- 插槽  占位符 -->
                    <template #default="scope">
                        <!-- <el-button type="text" size="small" @click="deleteRow(scope.row)">
                    删除
                        </el-button> -->
                        <!-- <el-button type="text" size="small" @click="currentstatus(scope.row.fields.taskid)">
                            查看任务状态
                        </el-button> -->

                        <!-- <el-button type="text" size="small" @click="downreport(scope.row.fields.taskid)">
                            更新状态
                    </el-button> -->

                    </template>
                </el-table-column>
            </el-table>

        </el-col>
    </el-row>


    <!-- 分页区域  -->
    <el-row>
        <el-col :offset="5">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />

            <!-- <el-pagination  background  
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="100"
            layout="prev, pager, next" :total="50" /> -->

        </el-col>
    </el-row>
</template>


<script setup>
// const 
// 1、模板中使用const定义常量
// 例如 const newMessage = 'New Message';  
// 2、还可以使用const关键字在箭头函数中定义常量。箭头函数是Vue中常用的声明方式之一。
// const handleClick = () => {
// const newMessage = 'New Message';
//       this.message = newMessage;
//     };
// 3、模板中使用const定义的常量只在当前作用域内有效。如果要在模板的不同块中使用相同的常量，
// 需要在上级作用域中定义。

//ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，
// 这个对象上只包含一个 .value 属性 ，比如 Map {}

import { ref, onMounted } from 'vue'   //ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回
import { ArrowRight } from '@element-plus/icons-vue'    //鍥炬爣鏄剧ず寮曠敤
import { email_send, getstatus, taskquery, runsql, api_test } from '../api/workers'
import { ElMessage } from 'element-plus';

// 璁剧疆琛ㄦ牸鍗曞厓銆佽鍜屽垪鐨勫竷灞€鏂瑰紡 ,涔熷彲浠ョ洿鎺ュ啓 tableLayout ="fixed"鎴栬€呮槸"auto"
const tableLayout = ref('auto')
const taskid = ref();
const linechart = ref();
const tasklisttable = ref([])
const textarea = ref('')


const currentPage = ref(1)      // currentPage = 1
const pageSize = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

function handleSizeChange() {
    console.log(`handleSizeChange items per page`)
}
function handleCurrentChange() {
    console.log(`current page: handleCurrentChange`)

}

//发送邮件接口测试
const email_test = () => {
    email_send().then(res => {
        let { action, code, task_id } = res.data;
        console.log("action:", action);
        console.log("code:", code);
        console.log("task_id:", task_id);
        // 任务执行后 ，查询下任务列表
        upTaskList()

    })
};


const apitest = () => {

    api_test().then(res => {

        console.log(res.data);
        let { action, code, task_id } = res.data;
        console.log("action:", action);
        console.log("code:", code);
        console.log("task_id:", task_id);
        // 任务执行后 ，查询下任务列表
        upTaskList()



    })
}




// 执行sql语句
function run_sql(params) {
    if (textarea.value) {
        ElMessage({
            message: textarea.value,
            type: 'success',
        })
        runsql(params).then(
            res => {
                console.log(res);
            }
        )
    }
    else {
        ElMessage({
            message: "Please input SQL before execute",
            type: 'error',
        })
    }

}


// 查询当前task的 状态
function currentstatus(params) {

    getstatus(scope.row.fields.taskid).then(
        ret => {
            console.log(ret);
            // gettasklist();
        }
    )

}


// 加载 已经完成的任务和状态
onMounted(() => {
    upTaskList()

})


// 执行任务的列表
function upTaskList() {
    taskquery().then(
        res => {
            console.log(res.data.msg);
            tasklisttable.value = res.data.msg
            console.log(tasklisttable.value);

        }
    )
};

</script>



<style lang="less" scoped>
// scoped是指定样式的局部作用域。
// 在vue中：App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。而在其它.vue页面中用scoped，
// 代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。
/* 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */
// 只要 咱们的 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性
// less 是一种css的扩展和动态样式语言，帮助我们自定义 ，管理和重用网页的样式 
.box-card {
    height: 100%;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}
</style>